<template>
  <div class="page-container">
    <div class="content-description">如下为，表格增加字段校验</div>

    <div class="operate-wrapper">
      <el-button type="primary" @click="changeEditMode">
        {{ setContentDisabled ? '详情模式' : '编辑模式' }}
      </el-button>
    </div>

    <div style="text-align: right">总价： ￥{{ total }} 元</div>

    <!-- 关联商品 -->
    <relate-goods
      v-if="type === 2"
      :list="goodsInfoResps"
      ref="relateGoods"
      @updateSum="(value) => updateSum('relateGoodsSum', value)"
      :disabled="setContentDisabled"
      :fcProductDiscount="fcProductDiscount"
      :rightsCardCount="rightsCardCount"
    />

    <div style="margin-top: 20px">
      <json-view
        v-show="isShowJSON"
        :data="jsonData"
        v-bind="getConfig"
      ></json-view>
    </div>

    <text-description :list="descriptionList">
      <template #title> 说明 </template>
    </text-description>

    <div class="footer">
      <el-button type="primary" @click="confirm">提交</el-button>
    </div>

    <!-- 下面有好几个类似 relate-goods 的组件，单个表格数据计算完以后需要告知父组件进行汇总处理 -->
  </div>
</template>

<script>
import Big from 'big.js'
import relateGoods from './releateGoods.vue'

/**
 * 模拟异步接口
 */
const getParams = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        fcProductDiscount: 0.9,
        rightsCardCount: 12
      })
    }, 3000)
  })
}

export default {
  name: 'index',
  components: {
    relateGoods
  },
  data () {
    return {
      setContentDisabled: false,
      type: 2,
      rightsCardCount: '',
      fcProductDiscount: '',

      // 详情页做数据回显
      goodsInfoResps: [],

      relateServiceSum: 0,
      relateGoodsCategorySum: 0,
      relateGoodsSum: 0,
      relatePackagesSum: 0,

      jsonData: {},

      descriptionList: [
        { label: 1, value: '演示了表格和form 校验组合的场景' },
        { label: 2, value: '从接口获取动态校验规则，重新动态生成某个字段校验' },
        { label: 3, value: '表单+表格案例场景，最优数据收集，汇总，校验写法， 代码层面解耦' },
        { label: 4, value: '表格编辑模式和详情模式展示' },
      ]
    }
  },
  computed: {
    total () {
      return Big(this.relateServiceSum).add(this.relateGoodsCategorySum).add(this.relateGoodsSum).add(this.relatePackagesSum)
    },
    isShowJSON () {
      return !this.jsonData || Object.keys(this.jsonData).length !== 0
    },
    getConfig () {
      return {
        theme: 'vs-code',
        deep: 5
      }
    }
  },
  created () {
    this.getParams()
  },
  methods: {
    /**
     * 通用的更新汇总方法， 因为有好几个类似上 关联商品的表格，子组件将数据计算好，传递给父组件，父组件只负责汇总即可
     */
    updateSum (key, value) {
      this[key] = value
    },

    async getParams () {
      try {
        let res = await getParams()

        this.fcProductDiscount = [null, undefined].includes(res.fcProductDiscount) ? '' : res.fcProductDiscount

        this.rightsCardCount = [null, undefined].includes(res.rightsCardCount) ? '' : res.rightsCardCount
      } catch (e) {
        this.$message.error(e.message)
      }
    },

    // 模拟详情和编辑状态
    changeEditMode () {
      this.setContentDisabled = !this.setContentDisabled
    },


    /**
     * 收集所有的数据
     */
    getData () {
      // 关联商品
      let relateGoodsIsOk = relateGoodsIsOk = this.$refs['relateGoods'].getCheckResult()

      if (!relateGoodsIsOk) {
        this.$message.error('请按照提示内容填写')
        return
      }

      // 全部校验通过，获取数据
      let relateGoodsData = this.$refs['relateGoods'].getFormModel()

      // 这里只演示一个表格，如果有好几个表格，数据都应该放在这里统一收集，管理，并返回
      return {
        ...relateGoodsData
      }
    },

    confirm () {
      let data = this.getData()

      if (!data) return

      this.jsonData = data
    },
  }
}
</script>

<style lang="less" scoped>
.page-container {
  margin-bottom: 60px;
}
.operate-wrapper {
  margin-bottom: 20px;
}

.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px 0;
}
</style>
